<template>
  <div class="box">
    <div>
      <!-- 这里是复选框 -->
      <van-checkbox-group v-model="result" :value='item' v-for="item in cartList" :key="item.id">
        <van-checkbox :name='item'  @click="danxuanFn(item.retail_price,item.number)">
          <!-- 这里是商品的信息  -->
          <van-swipe-cell>
            <van-card
              :num="item.number"
              :price="item.retail_price"
              :desc="item.goods_name"
              title="商品标题"
              class="goods-card"
              :thumb="item.list_pic_url"
            />
            <template #right>
              <van-button
                square
                text="删除"
                type="danger"
                class="delete-button"
                @click="deleteFn(item.product_id)"  
              />
            </template>
          </van-swipe-cell>
          <!-- 商品信息完毕 -->
        </van-checkbox>
      </van-checkbox-group>
    </div>
    <!-- 这里是总价,和提交订单 -->
     <van-submit-bar :price="priceFn()" button-text="提交订单" @submit="onSubmit">
      <van-checkbox v-model="checkedAll" @click="QuanxuanFn">全选</van-checkbox>
      <template #tip>
        你的收货地址不支持同城送, <span>修改地址</span>
      </template>
    </van-submit-bar>
  </div>
</template>

<script>
// 引入购物车需要的请求的函数
import {Cardata,DeleteData} from "@/utils/http";

export default {
  name: "Car",
  data() {
    return {
      result: [],         //这个是当点击 单选按钮以后就会将,点击的商品添加到其中
      cartList:[],        //这个是保存的用户添加到购物车中的商品信息
      price:0,            //这个属性代表商品的总价
      checkedAll:false ,  //这个是全选框所依赖的状态,
      price:0,            //每一个商品的总价格
    };
  },
  created(){  //组件创建完毕调用,我们一般进行axios请求
   console.log(this);
     const token = localStorage.getItem('token');
    //  console.log(token);
      Cardata({
        // 'X-Nideshop-Token':token
      }).then((res)=>{
      console.log(res);
      this.cartList=res.data.data.cartList
      console.log(this.cartList);
    })
    
  },
  methods:{

    deleteFn(val){   //这里是当点击的是删除按钮的时候,进行商品的删除操作
    //  console.log("安慰你GV为");
    let str=String(val)
    console.log(str);
    DeleteData({
      productIds:str
      }).then((res)=>{
     console.log(res);
    //  将已经被删除以后剩下的数据 赋值给 this.cartList 页面渲染的数据
     this.cartList=res.data.data.cartList 
    // 将已经被删除以后剩下的数据 赋值给this.result(单选框所依赖的数组) 
    //  this.result=res.data.data.cartList
    
    //  这里是将单选框中所依赖的数据进行循环遍历
      this.result.forEach((key,index)=>{
        console.log(key.id );
        // 这里需要在进行一次循环,因为返回的是删除后存在的数组  是一个数组,所以需要进行循环
           for(let i=0;i<res.data.data.cartList.length;i++){
            // 这里是判断单选框依赖的数组中,是否还存在已近被删除的数据
                if(key.id != res.data.data.cartList[i].goods_id){
                    // this.result.splice(i,1)   //这里是调用数组的删除的方法,
                     this.result=res.data.data.cartList;
                    console.log(56187);
                }
                }
        })
         this.danxuanFn()    //这里调用了一下,单选和全选的方法,
      this.priceFn()   //这里调用了一下统计总价格的方法,一边可以监听到删除以后的商品的价格
    console.log(this.result.length);

   
    // 下面是一个完成删除以后的一个轻提示
      this.$toast({               
                type:'success',
                message:'商品删除成功',
                duration:2000,
            })        
     
    //  this.cartList=[];
    })

    
    },
    // 点击提交的事件回调函数
   onSubmit(){

   },
  //  这个是单选按钮的点击事件的回调函数
   danxuanFn(){
    console.log(this.result);
    // console.log(this.result.length);
    // console.log(1111111111);
  //  这里是判断当当单选按钮全部被选中时的时候,就将 全选按钮的状态修改为被 选中的状态
    if(this.result.length == this.cartList.length ){
      this.checkedAll=true;
    }else{
      this.checkedAll=false;
    }

     //这里是全选被选中是,在点击删除按钮,时判断单选框是否已近唯有商品,如果没有就将全选框的选中状态取消
     
    if(this.result.length ==0){  
       this.checkedAll=false;
    }
  
     
   },
  
// 获取被点击的商品的价格
   priceFn(){
    // console.log(111111111);
    let sum =0;
    // 循环出,当前被选中的商品 将其中的金额和数量进行相乘运算,在把所有被选中的商品金额进行相加
    this.result.forEach((key,val)=>{
    //  console.log(key.retail_price);
    
    sum +=key.retail_price*key.number
    // console.log(sum);  
    })
    return sum*100     //这里是将总金额乘以100,
   },
  //  点击全选框的事件
   QuanxuanFn(){
    // 第一步当点击全选按钮的时候将所有的数据都赋值到result中
     if(this.checkedAll){
      this.result=this.cartList;
     }else{
      this.result=[];   //这里是当全选的状态时,清空单选框中 能所被 选中所依赖数据

     }
   }
   
  },
 
};
</script>

<style scoped lang='less'>
// 这里是商品的样式
.box {
  div {
    .goods-card {
      margin: 0;
    //   设置商品模块的背景颜色
      background-color: rgba(250,250,250,1);
    }
    .delete-button {
      height: 100%;
    }
    // 设置商品模块的样式
    /deep/.van-checkbox__label{
        flex:1;
    }
  
   
  }
  // 这个是将购物车中的总价格列表移动
    /deep/.van-submit-bar{
   bottom: 50px;
    }
}
</style>
